@import "reset" ;
@import "mixin" ;
.reset();
header{
    height: .35rem;
    background: #222;
    color: @fontWhite;
    ul{

        &:first-child{
            float: left;
            li{
            &:first-child{
                border-right: .01rem solid #3a3a3a;
            }
        }
    }
        &:last-child{
            float: right;
            li{
                &:first-child{
                    border-right: .01rem solid #3a3a3a;
                }
            }
        }
        li{
            float: left;
            height: 100%;
            line-height: .35rem;
            padding: 0 .05rem;
            a{
             color: white;
             cursor: pointer;
            }
        }
    }
}
// 内容区域
.container{
    display: flex;
    width: 11.7rem;
    margin: 0 auto;
    margin-top:.15rem;
    .leftbox{
        flex:0 0 1.1rem;
        li{
            width:100%;
            height: .4rem;
            line-height: .4rem;
            text-align: center;
            margin-bottom: .02rem;
            &.active{
                a{
                    color: @fontWhite;
                    background: @mainBGColor;
                }
            }
            a{
                display: block;
                border-radius: .05rem;
                cursor: pointer;
                &:hover{
                    color:@fontWhite;
                    background: @mainBGColor;
                }
            }
        }
    }

    // 中盒子
    .mainbox{
        flex: 1;
        padding: 0 .3rem;

        // xinwen
        .news{
            padding: .15rem 0;
            height: 1.85rem;
            width: 100%;
            display: flex;
            .video{
                flex:0 0 3.25rem;
                position: relative;
               span{
                    position: absolute;
                    left:41%;
                    top: 32%;
                    color: white;
                    font-size: .6rem;
                }
                .time{
                    position: absolute;
                    bottom: .1rem;
                    right: .1rem;
                    width: .6rem;
                    height: .22rem;
                    border-radius: .2rem;
                    color: white;
                    line-height: .22rem;
                    text-align: center;
                    background: rgba(50, 50, 50, .6);
                }
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .title{
                flex:1;
                margin-left: .2rem;
                h2{
                    a{
                        color: #222;
                        font-size: .2rem;
                        font-weight: bold;
                    }
                }
                ul{
                    li{
                        float: left;
                        padding: .15rem .05rem;
                        &:first-child{
                            a{
                            border: .01rem solid @tagTechColor;
                            color:@fontTag;
                            }                            
                        }
                        a{
                            display: block;
                        }
                        &:nth-child(2){
                            a{
                                img{
                                    width: .2rem;
                                    height: .2rem;
                                    border-radius: 50%;
                                }
                            }
                        }
                        a{
                            padding: 0;
                        }
                    }
                }
            }
        }
        // situ
        .fourtu{
            width: 100%;
            height: 1.9rem;
            border-top:.03rem  solid #f3f3f3;
            position: relative;
            .newstitle{
                flex:0 0 .46rem;
                h2{
                   a{
                    color: #222;
                    font-size: .2rem;
                    font-weight: bold;
                    line-height: .46rem;
                   } 
                }
            }
            .tutututu{
                flex:0 0 1rem;
                position: relative;
                .zhang{
                    position: absolute;
                    bottom: -.95rem;
                    right: .45rem; 
                    width: .4rem;
                    height: .22rem;
                    border-radius: .2rem;
                    color: white;
                    line-height: .22rem;
                    text-align: center;
                    background: rgba(50, 50, 50, .6);
                }
                ul{
                    li{
                        float: left;
                        width: 1.55rem;
                        height: 100%;
                        padding-right:.1rem; 
                        &:nth-child(4){
                            padding: 0;
                        }
                    }
                }
            }
            .laiyuan{
                flex: 1;
                position: absolute;
                left: 0;
                bottom: 0;
                ul{
                    li{
                        float: left;
                        padding: .15rem .05rem;
                        &:first-child{
                            a{
                            border: .01rem solid @tagTechColor;
                            color:@fontTag;
                            }                            
                        }
                        a{
                            display: block;
                        }
                        &:nth-child(2){
                            a{
                                img{
                                    width: .2rem;
                                    height: .2rem;
                                    border-radius: 50%;
                                }
                            }
                        }
                        a{
                            padding: 0;
                        }
                    }
                }
            }
        }
        // 无图
        .notu{
            width: 100%;
            height: .77rem;
            border-top:.03rem  solid #f3f3f3;
            h2{
                a{
                 color: #222;
                 font-size: .2rem;
                 font-weight: bold;
                 line-height: .46rem;
                }
            }
            ul{
                li{
                    float: left;
                    padding: .15rem .05rem;
                    &:first-child{
                        a{
                        border: .01rem solid @tagTechColor;
                        color:@fontTag;
                        }                            
                    }
                    a{
                        display: block;
                    }
                    &:nth-child(2){
                        a{
                            img{
                                width: .2rem;
                                height: .2rem;
                                border-radius: 50%;
                            }
                        }
                    }
                    a{
                        padding: 0;
                    }
                }
            }
        }
        //yitu
        .onetu{
            padding: .15rem 0;
            height: 1.23rem;
            width: 100%;
            display: flex;
            border-top:.03rem  solid #f3f3f3;
            .tu{
                flex:0 0 1.58rem;
                position: relative;
                img{
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            .title{
                flex:1;
                margin-left: .2rem;
                h2{
                    a{
                        color: #222;
                        font-size: .2rem;
                        font-weight: bold;
                    }
                }
                ul{
                    li{
                        float: left;
                        padding: .15rem .05rem;
                        &:first-child{
                            a{
                            border: .01rem solid @tagTechColor;
                            color:@fontTag;
                            }                            
                        }
                        a{
                            display: block;
                        }
                        &:nth-child(2){
                            a{
                                img{
                                    width: .2rem;
                                    height: .2rem;
                                    border-radius: 50%;
                                }
                            }
                        }
                        a{
                            padding: 0;
                        }
                    }
                }
            }
        } 
        // jiazai
        .jiazai{
            margin-top:.35rem; 
            width: 100%;
            height: .3rem;
            border: .02rem solid #a2cfee;
            background: @toastBGColor;
            border-radius: .02rem;
            line-height: .3rem;
            text-align: center;
            span{
                font-size: .14rem;
  
                a{
                    color: @toastColor;
                }
                i{
                    font-size: .13rem;
                }
            }
        }
    }
    // 右盒子
    .rightbox{
        flex: 0 0 3.4rem;
        height: 5rem;
        // sousuo
        .sousuo{
            position: relative;
            width: 100%;
            height: .45rem;
            input{
                width: 2.6rem;
                height: 100%;
                display: block;
                line-height: .45em;
                padding-left:.15rem;
                background: #f5f6f7;
                border: .01rem solid #eaeaeb;
                border-radius: .02rem; 
                padding: .15rem;
            }
            a{
                position: absolute;
                top: 0;
                right: 0;
                width:.8rem; 
                height: 100%;
                background: #208eda;
                text-align: center;
                line-height: .45rem;
                font-size: .14rem;
                color: white;
            }
        }
        .denglu{
            margin-top:.15rem; 
            padding: .2rem;
            background:  #f5f6f7;
            height: 2.35rem;
            .fangshi{
                width: 100%;
                background: white;
                border: .01rem solid  #eaeaeb;
                padding:.05rem .24rem;
                height: 1.95rem;
                >p{
                    display: block; 
                    color: #8d8d8d;
                    text-align: center;
                    margin: .15rem 0;
                }
                >a{
                    display: block; 
                    width: 2.4rem;
                    height: .4rem;
                    line-height: .4rem;
                    text-align: center;
                    margin: 0 auto;
                    color: white;
                    background: @mainBGColor;
                    border-radius:.05rem;
                }
                >ul{
                    display: flex;
                    margin-top:.17rem; 
                    li{
                        flex: 1;
                        a{
                            img{
                               width: .35rem;
                               height: .35rem;
                            }
                        }
                        &:first-child{
                            float: right;
                            margin-left:.6rem; 
                        }
                    }
                }
            }
        }
        // guanggao
        .guanggao{
            margin-top: .15rem;
            height: 3.4rem;
            width: 100%;
            padding: .2rem;
            background: #f5f6f7;
            .ggtu{
                width: 100%;
                height: 100%;
                a{
                    display: block;
                    margin-top: .34rem;
                    color: @adColor;
                    font-size: .12rem;
                }
            }
        }
        // redian
        .redian{
            width: 100%;
            height: 3.67rem;
            background: #f5f6f7;
            border-top: .03rem solid @mainBGColor;
            margin-top:.15rem; 
            h2{
                a{
                    display: block;
                    margin:.1rem .2rem; 
                    font-size: .2rem;
                    font-weight: bold;
                }
            }
            ul{
                li{
                    height: .8rem;
                    padding: .1rem .2rem;
                    border-bottom: .02rem solid #f3f3f3;
                    a{
                        display: flex;
                        align-items: center;
                        img{
                            flex: 0 0 .6rem;
                            width: .6rem;
                            height: .6rem;
                        }
                        h3{
                            flex: 1;
                            margin-left:.15rem; 
                            font-size: .14rem;
                        }
                    }
                }
            }
        }
        .batu{
            width: 100%;
            background: #f5f6f7;
            border-top: .03rem solid @mainBGColor;
            margin-top:.15rem; 
            height: 5.5rem;
            padding: .1rem .25rem;
            h2{
                a{
                    display: block;
                    margin:.1rem 0; 
                    font-size: .2rem;
                    font-weight: bold;
                }
            }
            .tttttttt{
            ul{
                li{
                    float: right;
                    width: 45%;
                    height: 1.25rem;
                    margin: 0 .07rem;
                    a{
                        img{
                            width: 1.45rem;
                            height: .55rem;
                        }
                        h3{
                            margin-top:.1rem; 
                            font-size: .14rem;
                        }
                    }                  
                   }
                }
            }
        }
        .guanyu{
            width: 100%;
            background: #f5f6f7;
            border-top: .03rem solid @mainBGColor;
            margin-top:.15rem; 
            height: 5.5rem;
            padding: .1rem .25rem;
            h2{
                a{
                    display: block;
                    margin:.1rem 0; 
                    font-size: .2rem;
                    font-weight: bold;
                }
            }
            ul{
                display: flex;
                li{
                    flex: 1;
                    a{
                        width: .6rem;
                        font-size: .14rem;
                        margin: 0 .05rem;
                    }
                }
            }
        }
    }
}